<template>
  <div class="overview">
    <div class="about">
      <span class="aboutSpan">关于</span>
      <span class="aboutInfoSpan">
        Vue3_Admin是基于Vue3、Vuex、VueRouter、Vite、ElementPlus、TypeScript、EChart5等技术的后台系统解决方案
      </span>
    </div>
    <div class="skill">
      <span class="skillSpan">技术栈</span>
      <ul class="skillInfoUl">
        <template v-for="item of skillData" :key="item.name">
          <li>
            {{ item.name }}：<span class="skillV">{{ item.value }}</span>
          </li>
        </template>
      </ul>
    </div>
    <div class="dependence">
      <el-descriptions title="环境依赖" :column="4" border>
        <template v-for="item in dependenciesData.dependencies" :key="item.name">
          <el-descriptions-item :label="item.name" label-align="center" align="center">
            <el-tag size="small">
              {{ item.value }}
            </el-tag>
          </el-descriptions-item>
        </template>

        <template v-for="item in dependenciesData.devDependencies" :key="item.name">
          <el-descriptions-item :label="item.name" label-align="center" align="center">
            <el-tag size="small">
              {{ item.value }}
            </el-tag>
          </el-descriptions-item>
        </template>
      </el-descriptions>
    </div>
    <div class="proBuild">
      <span class="proBuildSpan">项目结构</span>
      <pre class="proBuildInfoPre">{{ treeData }}</pre>
    </div>
  </div>
</template>

<script setup lang="ts">
import { treeData, dependenciesData, skillData } from './data/tree'
</script>

<style lang="less" scoped>
.about,
.skill {
  display: flex;
  flex-direction: column;
  background-color: rgb(224, 228, 234);
  margin-bottom: 10px;
  .aboutSpan {
    padding: 10px;
    border-bottom: 2px solid rgb(60, 82, 119);
    font-size: 18px;
    font-weight: 600;
  }

  .aboutInfoSpan {
    padding: 10px;
    font-size: 14px;
  }

  .skillSpan {
    padding: 10px;
    border-bottom: 2px solid rgb(60, 82, 119);
    font-size: 18px;
    font-weight: 600;
  }
  .skillInfoUl {
    font-size: 14px;
    padding: 0px;
    li {
      padding: 10px;
      .skillV {
        color: rgb(26, 104, 164);
      }
    }
    li:before {
      content: '';
      width: 8px;
      height: 8px;
      display: inline-block;
      border-radius: 50%;
      background: #4c8db5;
      vertical-align: middle;
      margin-right: 6px;
    }
  }
}
.dependence {
  background-color: rgb(224, 228, 234);
  margin-bottom: 10px;
  padding: 10px;
  font-size: 18px;
  font-weight: 600;
}
.proBuild {
  display: flex;
  flex-direction: column;
  background-color: rgb(224, 228, 234);
  margin-bottom: 10px;

  .proBuildSpan {
    padding: 10px;
    border-bottom: 2px solid rgb(60, 82, 119);
    font-size: 18px;
    font-weight: 600;
  }
  .proBuildInfoPre {
    padding: 0 10px;
    font-size: 16px;
  }
}
</style>
